{extend name="public/world"}
{block name="style"}{/block}
{block name="container"}
    <div class="layui-side layui-side-menu" style="width:160px;background-color: #fff;margin: 10px 0 10px 10px;padding-top:20px;">
        <div id="typeTree"></div>
    </div>
    <div class="layui-fluid" style="margin-left: 165px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form" lay-filter="formSearch">
                    <div class="layui-field-box" style="padding:0;">
                        <div class="layui-form-item" style="margin-bottom:0">
                            <div class="layui-inline my-search">
                                <div class="layui-input-inline">
                                    <input type="text" name="name" value="" placeholder="按名称" autocomplete="off" class="layui-input" lay-filter="name">
                                </div>
                                <div class="layui-input-inline" style="width: 170px;">
                                    <input type="hidden" id="type_id" name="type_id" value="0">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" title="清除条件" style="padding: 0 8px;" lay-submit lay-filter="reset"><i class="layui-icon" style="color:#009688;">&#xe640;</i></button>
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit lay-filter="search">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
                <div class="" id="userBox" style="display: none;">
                    <blockquote class="layui-elem-quote" id="descBox" style="margin-top: 5px;margin-bottom: 0;padding: 0;line-height: 22px;border-left: 1px solid #009688;border-bottom: 1px solid #009688;"></blockquote>
                    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script type="text/html" id="barDemo">
    {if isset($sonAuth['edit'])}
    <input type="checkbox" name="status" value="{{ d.status }}" lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }} data-href="{:url('/erp.Advert/edit')}?id={{ d.id }}">
    <a href="{:url('/erp.Advert/edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs j-iframe-pop" lxb-data="{width: '850px', height: '620px'}" title="修改广告">修改</a>
    {/if}
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-group fl">
        {if isset($sonAuth['add'])}
        <a href="{:url('/erp.Advert/add')}" class="layui-btn layui-btn-xs layuiadmin-btn-admin j-iframe-pop" lxb-data="{width: '850px', height: '620px'}" title="添加广告">添加广告</a>
        {/if}
        {if isset($sonAuth['types'])}
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addType">分类管理</button>
        {/if}
    </div>
</script>
<script>
    layui.use(['form','table','tree'], function() {
        var $ = layui.$
            , form = layui.form
            , table = layui.table
            , tree = layui.tree;
        //渲染
        tree.render({
            elem: '#typeTree'  //绑定元素
            ,id: 'treeID'
            ,data: {:json_encode($treeData)}
            ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            ,showLine: true
            ,click: function(obj){
                $('.layui-tree-set').removeClass('layui-tree-show');
                if(obj.data.id > 0) {
                    $(obj.elem).addClass('layui-tree-show');
                    $('#type_id').val(obj.data.id);
                } else {
                    $('#type_id').val(0);
                }
                tableIns.reload({
                    where: form.val("formSearch"),
                    page: {curr: 1}
                });
            }
        });
        table.on('toolbar(dataTable)', function(obj){
            var them = window.top !== window.self ? window.top : window.self;
            if (obj.event == 'addType') {
                them.layer.open({
                    type: 2
                    ,title: '广告分类管理'
                    ,content: "{:url('/erp.Advert/types')}"
                    ,maxmin: true
                    ,area: ['80%', '95%']
                    ,btn: ['关闭']
                    ,btnAlign: 'c' //按钮居中
                    ,fixed: false //不固定
                    ,moveOut: true //true  可以拖出窗外  false 只能在窗内拖
                    ,anim: 5 //出场动画 isOutAnim bool 关闭动画
                    ,offset: 'auto' //['100px','100px'],//'auto',//初始位置  ['100px','100px'] t[ 上 左]
                    ,shade: .7 //遮罩
                    ,resize: true //是否允许拉伸
                    ,move: '.layui-layer-title' // 默认".layui-layer-title",// 触发拖动的元素

                    ,success: function(layero){
                        layero.find('.layui-layer-min').remove();
                        layero.find('.layui-layer-close2').addClass('layui-layer-close1').removeClass('layui-layer-close2');
                    }
                    ,yes: function(){
                        window.location.reload();
                        them.layer.closeAll();
                    }
                    ,cancel: function(){
                        window.location.reload();
                        them.layer.closeAll();
                    }
                });
                return false;
            }
        });
        form.on('submit(search)', function(){
            tableIns.reload({
                where: form.val("formSearch"),
                page: {curr: 1}
            });
        });
        //头工具栏事件
        form.on('submit(reset)', function(){
            var searchs = form.val("formSearch");
            for (var i in searchs) {
                if(i!='type_id') searchs[i] = '';
            }
            form.val("formSearch", searchs);
            tableIns.reload({
                where: form.val("formSearch"),
                page: {curr: 1}
            });
        });
        var tableIns = table.render({
            elem: '#dataTable'
            ,url: "{:url('/erp.Advert/index')}" //数据接口
            ,where: form.val("formSearch")
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,size: 'sm'
            ,limit: 10
            ,text: {
                none : '暂无广告'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: false
            ,cols: [[ //表头
                {field: 'name', width: 220, title: '广告名称', fixed: 'left'}
                ,{field: 'scene_name', width: 80, title: '应用场景'}
                ,{field: 'tid_type', width: 80, title: '广告分类'}
                ,{field: 'type_type', width: 80, title: '主题类型'}
                ,{field: 'sys_type', width: 80, title: '收费方式'}
                ,{field: 'price', width: 80, title: '费用/单价', templet:function(d){
                    if(d.sys==1) return '<div>'+d.price+' 元</div>';
                    else return '<div>'+d.price+' 元/次</div>';
                }}
                ,{field: 'times', width: 80, title: '展示时长', templet:function(d){
                    return '<div>'+d.times+'秒</div>';
                }}
                ,{field: 'start_at', width: 90, title: '有效期始'}
                ,{field: 'end_at', width: 90, title: '有效期止'}
                ,{field: 'total', width: 80, title: '展示次数'}
                ,{field: 'url', width: 250, title: '跳转地址'}
                ,{fixed: 'right', width: 130, title: '操作', templet: '#barDemo'}
            ]]
        });
        table.on('row(dataTable)', function(obj){
            if($(obj.tr).hasClass('row-in')) {
                $(obj.tr).removeClass('row-in');
                $('#descBox').text('');
                table.render({
                    elem: '#userTable'
                    , cols: [[ //标题栏
                        {field: 'name', title: '姓名', width: 100}
                        , {field: 'position', title: '职位', width: 100}
                        , {field: 'phone', title: '电话', width: 100}
                        , {field: 'email', title: '邮箱', width: 150}
                        , {field: 'address', title: '地址', width: 160}
                        , {field: 'desc', title: '备注', width: 160}
                    ]]
                    , data: {}
                    , even: false
                    , size: 'sm'
                });
                $('#userBox').hide();
            } else {
                var uid = obj.data.user_id;
                if(!uid) {
                    $('#descBox').text('广告主：公司自用');
                    table.render({
                        elem: '#userTable'
                        , cols: [[ //标题栏
                            {field: 'name', title: '姓名', width: 100}
                            , {field: 'position', title: '职位', width: 100}
                            , {field: 'phone', title: '电话', width: 100}
                            , {field: 'email', title: '邮箱', width: 150}
                            , {field: 'address', title: '地址', width: 160}
                            , {field: 'desc', title: '备注', width: 160}
                        ]]
                        , data: []
                        , even: false
                        , size: 'sm'
                    });
                    $('#userBox').show();
                }
                $(obj.tr).addClass('row-in').siblings('tr').removeClass('row-in');
                $.post("{:url('/erp.Advert/public_get_user')}", {uid:uid}, function(res) {
                    if(res.code == 1) {
                        $('#descBox').text('广告主：' + res.data.name);
                        table.render({
                            elem: '#userTable'
                            , cols: [[ //标题栏
                                {field: 'name', title: '姓名', width: 100}
                                , {field: 'position', title: '职位', width: 100}
                                , {field: 'phone', title: '电话', width: 100}
                                , {field: 'email', title: '邮箱', width: 150}
                                , {field: 'address', title: '地址', width: 160}
                                , {field: 'desc', title: '备注', width: 160}
                            ]]
                            , data: res.data.users
                            , even: false
                            , size: 'sm'
                        });
                        $('#userBox').show();
                    } else {
                        return false;
                    }
                }, 'json');
            }
        });
    });
</script>
{/block}